<template>
	<view class="editUser-page">
		<ul v-if="user">
			<li>
				<div class="left">
					<span>项目名称</span>
					<input type="text" placeholder="请输入项目名称" v-model="form.project">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>

			<li>
				<div class="left">
					<span>所属公司名称</span>
					<input type="text" placeholder="请输入所属公司名称" v-model="form.company">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<!-- <picker class="picker" range-key="name" :range="departmentList"
				@change="(e) => onChange(e,'department', 'departmentList')"> -->
			<li>
				<div class="left">
					<span>所属行业</span>
					<input type="text" placeholder="请填写" v-model="form.department">
					<!-- :value="departmentName(form.department)" -->
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<!-- </picker> -->

			<li>
				<div class="left">
					<span>项目时长</span>
					<div class="date">
						<picker mode="date" class="picker" :start="startDate" :end="endDate"
							@change="(e) => bindDateChange(e,'start_time')">
							<input disabled type="text" :value="handleDateStart" placeholder="开始时间">
						</picker>
						<i></i>
						<picker mode="date" :value="handleDateEnd" :start="startDate" :end="endDate"
							@change="(e) => bindDateChange(e,'end_time')">
							<input disabled type="text" placeholder="至今" :value="handleDateEnd">
						</picker>
					</div>
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>

			<!-- 		<picker class="picker" range-key="name" :range="jobcateList"
				@change="(e) => onChange(e, 'job','jobcateList')"> -->
			<li>
				<div class="left">
					<span>项目描述</span>
					<input type="text" placeholder="请填写" v-model="form.content">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
			<!-- </picker> -->
			<li>
				<div class="left">
					<span>项目职责</span>
					<input type="text" placeholder="请填写" v-model="form.rule">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>


		</ul>
		<template v-if="routeType == 'add'">
			<SSButton title="保存" @click="save" />
		</template>
		<template v-else>
			<view class="btns">
				<button class="delete" @click="onClickDelete">
					删除
				</button>
				<button @click="save">保存</button>
			</view>
		</template>


	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import {
		validPhone,
		debounce
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				user: null,

				form: {
					company: '', // 公司
					department: '', // 部门
					content: '', // 项目描述
					start_time: '', // 开始时间
					end_time: '', // 结束时间
					rule: '', // 项目职责
				},



				departmentList: [], // 行业列表
				jobcateList: [], // 职位列表


				routeType: '', // 编辑还是添加
				projectId: '', //工作经历id

			};
		},
		computed: {
			// 性别
			handleSex() {
				let sexs = ['未知', '男', '女']
				return sexs[this.user && this.user.sex]
			},

			// 职位名称
			jobName() {
				return value => {
					let name = value && this.jobcateList.length > 0 && this.jobcateList.find(x => x.id == value)
					return name && name.name
				}
			},

			departmentName() {
				return value => {
					let name = value && this.departmentList.length > 0 && this.departmentList.find(x => x.id == value)
					return name && name.name
				}
			},
			handleDateStart() {
				let time = this.form && this.form.start_time
				if (!isNaN(Number(time)) && time) {
					let date = new Date(Number(time + '000'))
					return date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date
						.getMonth() + 1) + '-' + ((date.getDate()) < 10 ? `0${date.getDate()}` : date
						.getDate())
				} else {
					return time
				}
			},
			handleDateEnd() {
				let time = this.form && this.form.end_time
				if (!isNaN(Number(time)) && time) {
					let date = new Date(Number(time + '000'))
					return date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? `0${date.getMonth() + 1}` : date
						.getMonth() + 1) + '-' + ((date.getDate()) < 10 ? `0${date.getDate()}` : date
						.getDate())
				} else {
					return time
				}
			}

		},
		onLoad({
			routeType,
			id
		}) {

			uni.setNavigationBarTitle({
				title: routeType == 'add' ? '添加项目经历' : '编辑项目经历'
			})

			this.routeType = routeType


			const user = uni.getStorageSync('userInfo')
			this.user = user




			this.getCompanycate()
			this.jobcate()

			routeType == 'edit' && this.getUserproject(id)
		},
		methods: {
			// 编辑 - 获取工作经历详情
			async getUserproject(id) {
				const {
					data: {
						company,
						project,
						department,
						rule,
						content,
						start_time,
						end_time,
						id: projectId
					}
				} = await this.$http.User.getUserproject(id)
				this.projectId = projectId
				this.form = { // 工作经历
					company,
					project,
					department,
					rule,
					content,
					start_time,
					end_time,
				}
			},
			// 行业列表
			async getCompanycate() {
				const {
					data
				} = await this.$http.Recruit.companycate()
				this.departmentList = data
			},
			// 获取职位列表
			async jobcate() {
				const {
					data
				} = await this.$http.Recruit.jobcate()
				this.jobcateList = data
			},
			onChange(e, type, list) {
				this.form[type] = this[list][e.detail.value].id
			},
			// 日期
			bindDateChange(e, type) {
				let date = e.detail.value.split('-')
				this.form[type] = `${date[0]}-${date[1]}-${date[2]}`

			},
			// 删除
			onClickDelete() {
				uni.showModal({
					title: "确定要删除当前工作经历吗?",
					success: async () => {
						const {
							code,
							msg
						} = await this.$http.User.deleteUserProject(this.projectId)
						uni.showToast({
							title: code == 200 ? '删除成功' : msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
					}
				})
			},
			vefiDate(startTime, endTime) {
				let stratT = new Date(startTime).getTime()
				let endT = new Date(endTime).getTime()
				if (endT < stratT) {
					uni.showModal({
						title: '提示',
						content: '项目结束时间不能小于开始时间',
						showCancel:false
					})
					return false
				} else {
					return true
				}
			},
			// 提交保存
			save: debounce(async function() {
				let isOk = Object.values(this.form).every(x => x)
				if (!isOk) return uni.showToast({
					title: '请填写完整表单',
					icon: 'none'
				})

				if (!this.vefiDate(this.form.start_time, this.form.end_time)) return false
				let httpType = this.routeType == 'add' ? 'userproject' : 'editUserproject'

				const {
					code,
					msg
				} = await this.$http.User[httpType](this.form, this.projectId)
				uni.showToast({
					title: code == 200 ? `${this.routeType == 'add' ? '添加' : '编辑'}成功` : msg,
					icon: 'none'
				})
				this.form = {
					company: '', // 公司
					department: '', // 部门
					content: '', // 项目描述
					start_time: '', // 开始时间
					end_time: '', // 结束时间
					rule: '', // 项目职责
				}
				
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1200)
			}, 700)


		}
	}
</script>

<style lang="less" scoped>
	.editUser-page {
		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;


				&:last-of-type {
					border-bottom: unset;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					.date {
						display: flex;
						align-items: center;

						i {
							width: 20upx;
							height: 2upx;
							background-color: #CCCCCC;
							line-height: 24upx;
							margin-top: 20upx;
							margin-right: 20upx;
						}

					}

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
					}

					input,
					p {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						margin-top: 20upx;
						min-height: 24upx;
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.btns {
			display: flex;
			align-items: center;

			button {
				width: 316upx;
				height: 96upx;
				background: #2AABE2;
				font-size: 24upx;
				font-weight: 500;
				color: #fff;
				line-height: 96upx;
				border-radius: 8upx;

				&:first-of-type {
					background: #EFF0F1;
					color: #666E7A;

					&::after {
						border-color: #EFF0F1;
					}
				}
			}
		}

		.popup {
			position: fixed;
			top: 0%;
			left: 0%;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.popup-wrap {
				background: #fff;
				width: 570upx;
				height: 412upx;

			}

			.title {
				display: flex;
				align-items: center;
				padding: 0 32upx;
				height: 96upx;
				border-bottom: 1px solid #EEEEEE;

				span {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 400;
					line-height: 28upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.mobile-wrap {
				padding: 0 32upx;

				.mobile-input-ph {
					color: #999999;
				}

				.mobile-input {
					padding-top: 32upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;

					input {
						color: #333;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
					}

					button {
						height: 56upx;
						line-height: 56upx;
						background: #2AABE2;
						color: #fff;
						font-size: 24upx;
						font-weight: 500;
						padding: 0 10upx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding-top: 32upx;

				button {
					margin: 0;
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					background: #fff;
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
					margin-right: 32upx;
					border-radius: 8upx;

					&:last-of-type {
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}
		}
	}
</style>
